// 通知

.e-notification {
    .e-notification-item {
        display: flex;
        align-items: center;
        padding: 0.6rem 1.5rem;
        border-bottom: 1px solid e-base-color(grey, 1);
        transition: background-color .3s ease;

        &:last-child {
            border-bottom: 0;
        }

        .e-notification-item-icon {
            display: flex;
            flex: 0 0 2.5rem;
            align-items: center;

            i {
                font-size: 1.4rem;
                color: e-brand-color();
            }
            svg {
                width: 24px;
                height: 24px;
                margin-left: -4px;
            }
        }

        .e-notification-item-details {
            display: flex;
            flex-direction: column;
            flex-grow: 1;

            .e-notification-item-title,
            .e-notification-item-time {
                font-size: 1rem;
                font-weight: 400;
            }

            .e-notification-item-title {
                transition: color .3s ease;
                color: e-base-color(label, 3);
            }

            .e-notification-item-time {
                color: e-base-color(label, 2);
            }
            .e-notification-item-title-no-read{
                font-weight: 600;
                color: e-base-color(label, 4);
            }
        }

        &:hover {
            transition: background-color .3s ease;
            text-decoration: none;
            background-color: e-base-color(grey, 1);
            .e-notification-item-details {
                .e-notification-item-title{
                    transition: color .3s ease;
                    color: e-brand-color();
                }
            }
        }

        &:after {
            border: 0;
            @include e-arrow-icon(right, true);
            font-size: .8rem;
            line-height: 0;
            position: relative;
            color: e-base-color(label, 2);
        }
    }
    .e-notification-item-footer {
        display: flex;
        align-items: center;
        padding: 0.6rem 1.5rem;
    }
}
.e-notification-top-border {
    border-top: 1px solid e-base-color(grey, 1);
}